import { pieChart } from "@/utils";
import { colChart, lineChart, adBarChart } from "@/utils/echarts";
import { message } from "antd";
import React, { useState } from "react";
import { useRef } from "react";
import { useEffect } from "react";
function Chartsmodule({ area = false, showDown = true, showLegend, margin, useXis = false, pieType = "1", showTitle = true, showBtn = true, title = "数据", state, showPie = true, showBar = true, showLine = true, showAdBar = true, defaultModule }) {
    // useXis 表示 使用state里面的dayList，如果state中没有，会使用默认的
    const getStyle = () => {
        if (!showBtn) {
            return {
                display: "none"
            }
        }
    }
    const defaultShow = () => {
        if (defaultModule) {
            return defaultModule;
        }
        if (showPie) {
            return "pie"
        }
        if (showBar) {
            return "bar"
        }
        if (showLine) {
            return "line"
        }
        if (showAdBar) {
            return "adBar"
        }
        return "pie"
    }
    const [showModule, setShowModule] = useState(defaultShow());//默认显示分布图，bar则是条形图

    const pieRef = useRef(null)
    const barRef = useRef(null)
    const lineRef = useRef(null)
    const adBarRef = useRef(null);


    // 当data变化刷新/显示扇形图或者切换显示模块的时候
    useEffect(() => {
        switch (showModule) {
            case "pie": pieChart({
                event: pieRef.current,
                title: title,
                state: state,
                type: pieType,
                margin: margin,
                showLegend: showLegend
            }); break;
            case "bar": colChart({
                event: barRef.current,
                state: state,
                margin: margin,
                showLegend: showLegend
            }); break;
            case "adBar": adBarChart({
                event: adBarRef.current,
                state: state,
                margin: margin,
                showLegend: showLegend
            }); break;
            case "line": lineChart({
                event: lineRef.current,
                state: state,
                useXis: useXis,
                margin: margin,
                showLegend: showLegend,
                area: area
            }); break;
            default: console.log("none")
        }


    }, [state, title, showModule, pieType, useXis])

    // 下载
    const down = () => {

        message.success("已提交后台下载")
    }

    // 显示哪个模块的函数
    const showFun = () => {
        return (
            <>
                <div className="echart-container-center"  >
                    <div style={{ width: "100%", height: "100%" }} ref={showModule === "pie" ? pieRef : showModule === "bar" ? barRef : showModule === "adBar" ? adBarRef : lineRef}></div>
                </div>
            </>
        )
    }
    return (
        <>
            <div className="drag-widget-container" >
                <div className="echart-container">
                    <div className="echart-title">
                        {
                            showTitle === true ? <span className="text">{title}</span> : null
                        }
                        <span className="tips" style={getStyle()}>

                            {
                                showPie === true ? (<><span className={showModule === "pie" ? "btn active" : "btn"} onClick={() => setShowModule("pie")}>占比分布</span></>) : null
                            }
                            {
                                showBar === true ? (<><span className={showModule === "bar" ? "btn active" : "btn"} onClick={() => setShowModule("bar")}>数据统计</span></>) : null
                            }
                            {
                                showLine === true ? (<><span className={showModule === "line" ? "btn active" : "btn"} onClick={() => setShowModule("line")}>历史趋势</span></>) : null
                            }
                            {
                                showAdBar === true ? (<><span className={showModule === "adBar" ? "btn active" : "btn"} onClick={() => setShowModule("adBar")}>数据统计</span></>) : null
                            }
                            {
                                showDown === true ? (<span onClick={() => down()} className="down btn">报表下载</span>) : null
                            }
                        </span>
                    </div>
                    {
                        showFun()
                    }


                </div>
            </div>

        </>
    )
}
export default Chartsmodule